<template>
  <div class="login">
    <div class="box">
      <h2>银行系统管理平台</h2>
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        status-icon
        label-width="60px"
        label-position="top"
      >
        <el-form-item label="账号" prop="account">
          <el-input v-model="formData.account" clearable />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="formData.password" type="password" clearable />
        </el-form-item>
        <el-form-item prop="remember">
          <el-checkbox v-model="formData.remember" label="记住我" />
        </el-form-item>
        <el-form-item>
          <el-button
            :loading="loading"
            type="success"
            @click="submitForm(formRef)"
            class="login-btn"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { FormInstance, FormRules, ElMessage } from "element-plus";
import { useRouter } from "vue-router";
// 路由实例
const router = useRouter();
// 表单实例
const formRef = ref<FormInstance>();
// 表单数据
const formData = reactive({
  account: "",
  password: "",
  remember: false,
});
// 登录按钮加载状态
const loading = ref(false);

// 账号验证
const validateAct = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入账号"));
  } else {
    callback();
  }
};

// 密码验证
const validatePwd = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else {
    callback();
  }
};

// 表单验证规则
const rules = reactive<FormRules<typeof formData>>({
  account: [{ validator: validateAct, message: "请输入账号", trigger: "blur" }],
  password: [
    { validator: validatePwd, message: "请输入密码", trigger: "blur" },
  ],
});

// 提交表单
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      loading.value = true;
      ElMessage({
        message: "登录成功!",
        type: "success",
      });
      router.push("/index");
    } else {
      loading.value = false;
    }
  });
};
</script>

<style scoped lang="scss">
.login {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  .box {
    width: 400px;
    h2 {
      text-align: center;
      color: #000000;
      font-size: 24px;
      margin-bottom: 20px;
    }
    :deep(.el-form-item__label) {
      color: #000000;
    }
    :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
      background-color: #00a870;
      border-color: #00a870;
    }
    :deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
      color: #00a870;
    }
    .login-btn {
      width: 100%;
      background-color: #00a870;
      border-color: #00a870;
    }
  }
}
</style>
